<template>
  <div class="right">
    <div class="img">
      <GlobalImageDeep :url="playStoreBgUrl" :imgWidth="200" :imgHeight="200" />
    </div>
    <div class="info">
      <p class="name">歌曲名称 :　{{ playStoreCurrentSong.name }}</p>
      <div class="authorBox one_txt_cut">
        作者 : &nbsp;
        <div v-for="item in playStoreCurrentSong.ar" :key="item.id">
          <i>{{ item.name }}</i>
          <span>/</span>
        </div>
        <!-- <div v-for="item in playStoreCurrentSong.ar" :key="item.id">
          <i>{{ item.name }}</i>
          <span>/</span>
        </div> -->
      </div>
    </div>
    <div class="lyric">
      <div
        class="scroll_lyric"
        :style="{ transform: `translateY(${playStoreLyricY}px)` }"
      >
        <p
          v-for="(item, index) in playStoreLyricList"
          :key="index"
          :class="playStoreCurrentLyricIndex == index ? 'active' : null"
        >
          {{ item.content }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "right",
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState({
      playStoreCurrentSong: (state) => state.playerStore.currentSong,
      playStoreIsPlaying: (state) => state.playerStore.isPlaying,
      playStoreLyricList: (state) => state.playerStore.lyricList,
      playStoreBgUrl: (state) => state.playerStore.bgUrl,
      playStoreLyricY: (state) => state.playerStore.lyricY,
      playStoreCurrentLyricIndex: (state) =>
        state.playerStore.currentLyricIndex,
    }),
  },
};
</script>

<style lang="less" scoped>
.right {
  width: 300px;
  height: 100%;
  padding-top: 20px;
  text-align: center;
  // background-color: red;
  color: #999999;
  .img {
    margin: 0 auto;
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    &::before {
      position: absolute;
      top: 0;
      left: 26px;
      width: 100%;
      height: 100%;
      content: "";
      background: url("../../../assets/images/album-cover.png") no-repeat
        center/cover;
    }
  }
  /deep/ .el-image img {
    border-radius: 8px;
  }
  .info {
    width: 100%;
    .name {
      margin-bottom: 10px;
    }
    .authorBox {
      display: flex;
      justify-content: center;
      width: 100%;
      > div {
        display: flex;
        span {
          margin-left: 6px;
          margin-right: 6px;
        }
        i {
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
      }
      > div:last-child {
        span {
          display: none;
        }
      }
    }
  }
  .lyric {
    // height: calc(100% - 270px);
    height: 550px;
    margin-top: 50px;
    padding: 25px 0;
    overflow: hidden;
    // background-color: green;
    .scroll_lyric {
      transition: transform 0.1s ease-out 0s;
      p {
        height: 30px;
        line-height: 30px;
        &.active {
          color: @globalColor;
        }
      }
    }
  }
}
</style>
